<template>
    <div>
        <!-- 操作 -->
        <el-button-group>
            <el-button type="warning" size="small" @click="bindAddRoleForm"
                ><el-icon><Plus /></el-icon> 添加</el-button
            >
            <el-button type="warning" size="small" @click=""
                ><el-icon><Refresh /></el-icon>刷新</el-button
            >
        </el-button-group>

        <!-- 角色列表 -->
        <el-table :data="roleList" border stripe>
            <el-table-column prop="r_id" label="序号" />
            <el-table-column prop="rolename" label="角色名称" />
            <el-table-column prop="description" label="描述" />
            <el-table-column label="编辑">
                <template #default="scope">
                    <EditRoleInput
                        v-model:roleName="scope.row.rolename"
                    ></EditRoleInput>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="bindAuthMenu(scope.row.r_id)"
                        >权限管理</el-button
                    >
                    <el-button size="small" @click="bindEditRoleForm(scope.row)"
                        >编辑</el-button
                    >
                    <el-button size="small" type="danger" @click=""
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加角色 -->
        <el-dialog
            :title="formType == 'ADD' ? '添加角色' : '编辑角色'"
            v-model="disableAddRoleForm"
            width="40%"
        >
            <AddRoleDialog
                v-if="disableAddRoleForm"
                @close="closeRoleAddDialog"
                :role="role"
                :formType="formType"
            ></AddRoleDialog>
        </el-dialog>

        <el-drawer
            v-model="disableAuthMenuDrawer"
            title="权限设置"
            direction="rtl">
            <AuthMenu  v-if="disableAuthMenuDrawer" :roleId="roleId"></AuthMenu>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import EditRoleInput from '@/components/EditRoleInput.vue'
import AddRoleDialog from '@/components/AddRoleDialog.vue'
import AuthMenu from '@/components/AuthMenu.vue'
import { Refresh, Plus } from '@element-plus/icons-vue'
import { useRole, useAuth } from '@/hooks/role'
const {
    roleList,
    disableAddRoleForm,
    bindAddRoleForm,
    bindEditRoleForm,
    closeRoleAddDialog,
    formType,
    role,
} = useRole()

const { disableAuthMenuDrawer,bindAuthMenu,roleId } = useAuth()
</script>

<style scoped></style>
